<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width,initial-scale=1 user-scalable=0">
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../js/layer/layer.js"></script>
<script type="text/javascript" src="../js/template.js"></script>
<script type="text/javascript" src="../js/base.js"></script>
<style type="text/css">
body{
margin: 0;
}
.left{
width: 100px;
height: 100%;
position: absolute;
overflow: auto;
background-color: #f4eee6;
}
.left ul{
    list-style-type: none;
    padding-inline-start: 5px;
}
.left ul li{
    border: 0.4px #eeeeee solid;
    margin-right: 4px;
    text-align: center;
    margin-bottom: 5px;
    padding: 3px 0;
}
.selected{
background-color: #dbe6e6;
    color: #a48358;
}

.main{
width:calc(100% - 100px);
height: 100%;
position: absolute;
left: 100px;

}
.list{
position: absolute;
width: 100%;
height:calc(100% - 100px);
overflow: auto;
    background-color: #fff2e0;
}
.pay{
position: absolute;
top:calc(100% - 100px);
height: 100px;
width: 100%;
background-color: #f5f6ee;
}
.itemtitle input{
    width: 10px;
}
.itemtitle div{
    display: block;
}

.itemtitle div b{
position: relative;
    cursor: pointer;
    margin: 0 3px;
    float: right; 
    font-size: 18px;	
}
.itemtitle input{
    border: none;
    outline: none;
    -webkit-user-modify: read-only;
        margin-left: 5px;
    color: #3176b3;
        background-color: transparent;
}
.itemtitle span{
	color: red;font-weight: 600;
}
.itemtitle .itemlable{
width: 100%;
    overflow: hidden;
    height: 14px;
    font-size: 12px;
}

.listitem  {
display: inline-block;
    margin: 5px;
    padding: 4px;
    border: 0.3px #eeeeee solid;
    text-align: center;
        width: 100px;
}
.pay b{
display: block;
margin-left: 10px;
margin-top: 10px;
}
.pay span{
margin-left: 10px;
}
.pay div
{
    width: 100px;
    height: 26px;
    background-color: #dfaf9f;
    text-align: center;
    color: #575061;
    position: absolute;
    right: 5px;
    bottom: 5px;
}
</style>
</head>
<body>
<script id="tplContent" type="text/html">

	<%
		 for(var i=0; i < data.length; i++){
					var item = data[i];
	%>	
	  
<li myid="<%=item.id%>"   ><%=item.name%></li>
<% } 
%>

</script>

<script id="tplContent1" type="text/html">

	<%
		 for(var i=0; i < data.length; i++){
					var item = data[i];
	%>	
	  
		<div class="listitem"  myid="<%=item.id%>"  price="<%=item.price%>">
	<img src="<%=item.picurl%>" width="100" height="100" >
	<div class="itemtitle">
	<div class="itemlable"><%=item.name%></div>
	<div>
          <span><%=item.price%>￥</span> <input value="0"><b class="add">+</b><b>-</b>
	 </div>

</div></div>
<% } 
%>

</script>
<div class="left">
<ul>

</ul>
</div>

<div class="main">
<div class="list">
	
	
	
</div>
<div class="pay">
	
	<b>总数量:<span>0</span></b>
	<b>总金额:<span>0￥</span></b>
	 <div class="checkpay">付款结算</div>
</div>
</div>
<script type="text/javascript">

var deskno=getParam("deskno");
if(!deskno)deskno="0000";
var allcount=0;
var allamount=0;
$(function(){
	fresh();
})

var order={deskno:deskno,allcount:0,allamount:0,items:{}};//需要提交的对象，桌号。单据，总价等
function freshitems(id){//m是加载成功的菜
	freshTpl($(".list"),"../Food/getlist?where= where food.foodtype_id="+id,'tplContent1',function(m){
		m.on("click","b",function(){//b是加号或减号
			var li=$(this).parents(".listitem");
			var input=li.find("input");//数量，单价等
			var val=parseInt(input.val());
			var id=li.attr("myid");
			var sub=order.items[id];//取值
			if(typeof(sub)=='undefined')sub={count:0,price:0};
			var price=parseFloat(li.attr("price"));
			sub.price=price;//数量，单价，id
			sub.id=id;//
			if($(this).hasClass("add")){
				input.val(val+1);
				allcount+=1;//总数量，总价格
				allamount+=price;
				sub.count+=1;//
			}else{
				var count=li.find("input").val();
				if(count==0) return;
				input.val(val-1);
				allcount-=1;
				allamount-=price;
				sub.count-=1;//
			}
			//赋值
			order.allcount=allcount;//最后更新
			order.allamount=allamount;
			order.items[id]=sub;
			$(".pay  span:eq(0)").text(allcount)
			$(".pay  span:eq(1)").text(allamount)
			///cosole.log(order);//加减号
		})
	});
	
}
//状态栏更新
function fresh(){
	freshTpl($(".left ul"),"../FoodType/getlist",'tplContent',function(m){
		var first=$(m.get(0));
		first.addClass("selected");
		freshitems(first.attr("myid"));
	});//点击后执行语句，li是动态标签，后期生成
	$(".left ul").on("click","li",function(){
		$(".left ul li").removeClass("selected");
		var id=$(this).attr("myid");
		$(this).addClass("selected");//this是当前点击的
		freshitems(id);
		
		
	})
	
	
}


$(".checkpay").click(function(){
	if(order.allcount==0){
		openAlert("必须先点菜才能支付！")
		return;
	}
	$.post("../Order_Main/save",{cmd:"insert",json: JSON.stringify(order)},function(json){
		if(json.status>0){
			openAlert("点菜下单已支付完成，请在餐台侯餐即可！",function(){
				location.reload();
			})
			
		}
	},"json");
})


</script>
</body>
</html>